<template>
  <div class="bjxxwh_component baseContainer">
    <div class="baseBoderShadow bgWhite baseBorderRadius">
      <div class="operate_container">
        <!-- 入学年级 -->
        <div class="operate_item">
          <div class="operate_left">入学年级</div>
          <div class="operate_right">
            <el-select
              v-model="rxNjId"
              placeholder="请选择"
              style="width: 185px;"
              clearable
            >
              <el-option
                v-for="(item, index) in rxNjOptions"
                :key="index"
                :label="item.MC"
                :value="item.ID"
              ></el-option>
            </el-select>
          </div>
        </div>
        <!-- 所属专业 -->
        <div class="operate_item">
          <div class="operate_left">所属专业</div>
          <div class="operate_right">
            <el-select
              v-model="zzJgId"
              placeholder="请选择"
              style="width: 185px;"
              clearable
            >
              <el-option
                v-for="(item, index) in zzJgOptions"
                :key="index"
                :label="item.MC"
                :value="item.ID"
              ></el-option>
            </el-select>
          </div>
        </div>
        <!-- 学制 -->
        <div class="operate_item">
          <div class="operate_left">学制</div>
          <div class="operate_right">
            <el-select
              v-model="xzId"
              placeholder="请选择"
              style="width: 185px;"
              clearable
            >
              <el-option
                v-for="(item, index) in xzOptions"
                :key="index"
                :label="item.MC"
                :value="item.ID"
              ></el-option>
            </el-select>
          </div>
        </div>
        <div class="operate_item">
          <div class="operate_left">班级名称</div>
          <div class="operate_right">
            <el-input
              placeholder="请输入"
              v-model.trim="bm"
              style="width: 182px;"
              clearable
            ></el-input>
          </div>
        </div>
        <!-- 查询按钮 -->
        <div class="operate_item_btnGroup">
          <el-button
            type="warning"
            @click="searchFunc"
          >搜索</el-button>
          <el-button
            type="primary"
            class="btnGray"
            @click="resetFunc"
          >重置</el-button>
        </div>

      </div>
      <!--  -->
      <div class="handle_wrap">
        <el-button
          type="primary"
          @click="addFunc"
        >新增</el-button>
        <el-button @click="delFunc(1)">删除</el-button>
        <el-button @click="importClick">导入</el-button>
        <el-button>合并</el-button>
      </div>
      <!-- 表格区域 -->
      <div class="table_wrap">
        <div class="table_box">
          <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column
              type="selection"
              width="55"
              align="center"
            >
            </el-table-column>
            <el-table-column
              label="序号"
              width="60"
              align="center"
            >
              <template slot-scope="scope">{{ pageSize * (currentPage - 1) + 1 + scope.$index }}</template>
            </el-table-column>
            <el-table-column label="班名">
              <template slot-scope="scope">
                <div
                  class="one_line"
                  :title="scope.row.BM"
                >{{ scope.row.BM }}</div>
              </template>
            </el-table-column>
            <el-table-column label="所属院系">
              <template slot-scope="scope">
                <div
                  class="one_line"
                  :title="scope.row.YXMC"
                >{{ scope.row.YXMC }}</div>
              </template>
            </el-table-column>
            <el-table-column label="所属专业">
              <template slot-scope="scope">
                <div
                  class="one_line"
                  :title="scope.row.ZYMC"
                >{{ scope.row.ZYMC }}</div>
              </template>
            </el-table-column>
            <el-table-column label="入学年级" width="100">
              <template slot-scope="scope">
                <div
                  class="one_line"
                  :title="scope.row.RXNJMC"
                >{{ scope.row.RXNJMC || '-' }}</div>
              </template>
            </el-table-column>
            <el-table-column label="班主任">
              <template slot-scope="scope">
                <div
                  class="one_line"
                  :title="scope.row.BZRXM"
                >{{ scope.row.BZRXM || '-' }}</div>
              </template>
            </el-table-column>
            <el-table-column
              label="学制"
              width="120"
            >
              <template slot-scope="scope">
                <div class="one_line" :title="scope.row.xzmc">{{ scope.row.xzmc || '-' }}</div>
              </template>
            </el-table-column>
            <el-table-column
              label="是否启用"
              width="80"
            >
              <template slot-scope="scope">
                <div class="special_switch_wrap">
                  <el-switch
                    v-model="scope.row.SFQY"
                    inactive-text="否"
                    active-text="是"
                    :active-value="1"
                    :inactive-value="0"
                    @change="changeFunc(scope.row, ...arguments)"
                  >
                  </el-switch>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              width="150"
              align="center"
            >
              <template slot-scope="scope">
                <div class="el-table-btn-wrap">
                  <el-button
                    type="warning"
                    size="mini"
                    round
                    @click="editFunc(scope.row)"
                  >编辑</el-button>
                  <el-button
                    size="mini"
                    round
                    @click="delFunc(scope.row)"
                  >删除</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="page_box">
          <el-pagination
            background
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40,50]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalSize"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            v-show="totalSize"
          ></el-pagination>
        </div>
      </div>
    </div>
    <!-- 新增和编辑 -->
    <el-dialog
      title="编辑/新增班级"
      width="800px"
      :visible.sync="dialogVisible"
    >
      <el-form
        :model="formData"
        :rules="rules"
        ref="ruleForm"
        label-width="120px"
        class="demo-ruleForm"
      >
        <el-form-item
          label="班号"
          prop="bh"
        >
          <el-input
            placeholder="请输入内容"
            v-model="formData.bh"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item
          label="班名"
          prop="bm"
        >
          <el-input
            placeholder="请输入内容"
            v-model="formData.bm"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item
          label="班级简称"
          prop="bjjc"
        >
          <el-input
            placeholder="请输入内容"
            v-model="formData.bjjc"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item
          label="班主任"
          prop="bzrId"
        >
          <el-select
            v-model="formData.bzrId"
            filterable
            remote
            clearable
            reserve-keyword
            placeholder="输入姓名或工号查询..."
            :remote-method="remoteMethod"
          >
            <el-option
              v-for="item in jzgList"
              :key="item.id"
              :label="item.label"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="所属院系"
          prop="yxId"
        >
          <el-select
            v-model="formData.yxId"
            placeholder="请选择"
            @change="formData.fjdId = '';zyList = [];getAllZy(formData.yxId);"
          >
            <el-option
              v-for="(vo, i) in yxList"
              :key="i"
              :value="vo.ID"
              :label="vo.MC"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="所属专业"
          prop="fjdId"
        >
          <el-select
            v-model="formData.fjdId"
            placeholder="请选择"
          >
            <el-option
              v-for="(vo, i) in zyList"
              :key="i"
              :value="vo.ID"
              :label="vo.MC"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="年级"
          prop="njId"
        >
          <el-select
            v-model="formData.njId"
            placeholder="请选择"
          >
            <el-option
              v-for="(vo, i) in njList"
              :key="i"
              :value="vo.ID"
              :label="vo.MC"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="学制"
          prop="xzId"
        >
          <el-select
            v-model="formData.xzId"
            placeholder="请选择"
          >
            <el-option
              v-for="(vo, i) in xzOptions"
              :key="i"
              :value="vo.ID"
              :label="vo.MC"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="入学时间"
          prop="rxsj"
        >
          <el-date-picker
            v-model="formData.rxsj"
            type="date"
            value-format="yyyy-MM-dd"
            clearable
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item
          label="预计毕业时间"
          prop="yjbysj"
        >
          <el-date-picker
            v-model="formData.yjbysj"
            type="date"
            value-format="yyyy-MM-dd"
            clearable
            placeholder="选择日期"
            :editable="false"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item
          label="学习方式"
          prop="xxfsId"
        >
          <el-select
            v-model="formData.xxfsId"
            placeholder="请选择"
            clearable
          >
            <el-option
              v-for="(vo, i) in xxfsList"
              :key="i"
              :value="vo.ID"
              :label="vo.MC"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="编制人数"
          prop="rs"
        >
          <el-input
            placeholder="请输入内容"
            v-model="formData.rs"
            type="number"
            v-num
          ></el-input>
        </el-form-item>
        <el-form-item
          label="层次"
          prop="ccId"
        >
          <el-select
            v-model="formData.ccId"
            placeholder="请选择"
            clearable
          >
            <el-option
              v-for="(vo, i) in ccList"
              :key="i"
              :value="vo.ID"
              :label="vo.MC"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="是否启用"
          prop="sfqy"
        >
          <el-radio-group v-model="formData.sfqy">
            <template v-for="(vo, i) in sfqyOptions">
              <el-radio
                :key="`radio_${i}`"
                :label="vo.label"
              >{{vo.name}}</el-radio>
            </template>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="primary"
          @click="submitForm"
        >确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 导入班级 -->
    <el-dialog
      :visible.sync="dialogVisibleImportExcel"
      title="导入"
      width="600px"
    >
      <div class="uploadBox clearfix">
        <div class="clearfix">
          <Upload
            ref="upload_excel_ref"
            :excelaccept="true"
            @success="uploadSuccess_excel"
            :beforeUpload="beforeUpload_excel"
            @uploadError="uploadError_excel"
            action='/web/bjxxb/importBjInfo'
            title="导入"
            accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
            class="fl"
          ></Upload>
          <a
            href="/web/bjxxb/downloadBjImportTemplate"
            class="fl downUrl"
          >下载模板</a>
        </div>
        <div class="buttonClass clearfix">
          <el-button
            type="primary"
            @click="onSubmit_excel"
            class="fl"
          >导入</el-button>
          <el-button
            class="fl"
            @click="refer_excel"
          >重置</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
// 入学年级
import {
  getDictByBzdm_xn,
  getDictByBzdm_xz,
  getDictByBzdm_xxfs,
  getDictByBzdm_bjcc
} from "@/utils/common.js";
import Upload from "@/components/webupload/index.vue";
export default {
  name: 'bjxxwh',
  components: {
    Upload
  },
  data() {
    return {
      editId: "",
      pageSize: 10,
      currentPage: 1,
      totalSize: 0,
      multipleSelection: [],
      searchData: {
        xzId: "",
        rxNjId: "",
        zzJgId: "",
        bm: ""
      },
      zzJgLx: "ZY",
      rxNjId: "",
      rxNjOptions: [],
      zzJgId: "", // 组织机构id
      zzJgOptions: [], // 组织机构options,
      xzId: "",
      xzOptions: [],
      bm: "",
      tableData: [],
      dialogVisible: false,
      formData: {
        bh: "", // 班号
        bm: "", // 班名
        bjjc: "", // 班级简称
        bzrId: "", // 班主任id
        yxId: "", // 院系id
        fjdId: "", // 专业id
        njId: "", // 年级
        xzId: "", // 学制
        rxsj: "", // 入学时间
        yjbysj: "", // 预计毕业时间
        xxfsId: "", // 学习方式
        rs: "", // 编制人数
        ccId: "", // 层次
        sfqy: 1
      },
      sfqyOptions: [{ name: "启用", label: 1 }, { name: "停用", label: 0 }],
      rules: {
        bh: [
          { required: true, message: "班号不能为空", trigger: "blur" },
          { min: 1, max: 10, message: "长度在 1 到 10 个字符", trigger: "blur" }
        ],
        bm: [
          { required: true, message: "班名不能为空", trigger: "blur" },
          { min: 1, max: 100, message: "长度在 1 到 100 个字符", trigger: "blur" }
        ],
        bjjc: [
          { min: 0, max: 300, message: "长度在 0 到 300 个字符", trigger: "blur" }
        ],
        yxId: [
          { required: true, message: "所属院系不能为空", trigger: "change" }
        ],
        fjdId: [
          { required: true, message: "所属专业不能为空", trigger: "change" }
        ],
        njId: [{ required: true, message: "年级不能为空", trigger: "change" }],
        xzId: [{ required: true, message: "学制不能为空", trigger: "change" }],
        rs: [
          { validator: (rule,value, callback) => {
            if (value > 500) {
              return callback(new Error('编制人数不能多于500'))
            }
            callback();
          } }
        ]
      },
      jzgList: [],
      yxList: [],
      zyList: [],
      njList: [],
      xxfsList: [],
      ccList: [],
      fjId: "", // 房间Id
      fjOptions: [], // 房间options
      dialogVisibleImportExcel: false // 导入的弹出层
    };
  },
  mounted() {
    this.getDictByBzdm_xn();
    this.getDictByBzdm_xz();
    this.getAllZy("", "zzJgOptions");
    this.getBjListByCon();
    this.getSyncData();
  },
  methods: {
    /**
     * @name importClick
     * @description 点击导入
     * @author cjs1992
     * @date 2019-11-18 14:13:50
     */
    async importClick() {
      this.dialogVisibleImportExcel = true;
      // 清空
      this.$nextTick(() => {
        this.refer_excel();
      });
    },
    /**
     * @name beforeUpload_excel
     * @description
     * @author cjs1992
     * @date 2019-11-22 08:43:26
     */
    beforeUpload_excel(param) {
      const { name, type } = param;
      const arr = ["xls", "xlsx"];
      const str = name.split(".");
      if (arr.indexOf(str[str.length - 1]) === -1) {
        this.$message({
          type: "warning",
          message: `‘${name}’不是受支持的文件格式!`
        });
        return false;
      }
      return true;
    },
    /**
     * @name uploadError_excel
     * @description
     * @author cjs1992
     * @date 2019-11-22 08:43:56
     */
    async uploadError_excel() {
      this.$refs.upload_excel_ref.$refs.fileUpIpt.value = "";
      this.$refs.upload_excel_ref.fileName = "";
    },
    /**
     * @name uploadSuccess_excel
     * @description
     * @author cjs1992
     * @date 2019-11-22 08:44:12
     */
    async uploadSuccess_excel(res) {
      // this.$refs.upload_excel_ref.$refs.fileUpIpt.value = "";
      // this.$refs.upload_excel_ref.fileName = "";
      this.dialogVisibleImportExcel = false;
      if (res.data) {
        this.$msgbox({
          message: res.msg + "点击下载可以查看上传文件失败原因",
          showCancelButton: true,
          confirmButtonText: "下载",
          cancelButtonText: "取消",
          beforeClose: (action, instance, done) => {
            if (action === "confirm") {
              instance.confirmButtonLoading = true;
              instance.confirmButtonText = "下载中...";
              this.$downloadFunc({
                url: "/web/bjxxb/downloadBjImportErrorData",
                data: {
                  // lists: JSON.stringify(res.data).replace(/\"/g,"'"),
                  key: res.data
                },
                method: "get"
              });
              setTimeout(() => {
                done();
                instance.confirmButtonLoading = false;
              }, 3000);
            } else {
              done();
            }
          }
        });
      }
    },
    /**
     * @name onSubmit_excel
     * @description 提交
     * @author cjs1992
     * @date 2019-11-22 08:50:16
     */
    onSubmit_excel() {
      if (this.$refs.upload_excel_ref.fileName == "") {
        this.$message({
          type: "warning",
          message: "请选择上传文件!"
        });
      } else {
        this.$refs.upload_excel_ref.inputChange();
      }
    },
    /**
     * @name refer_excel
     * @description 重置
     * @author cjs1992
     * @date 2019-11-22 08:50:48
     */
    refer_excel() {
      this.$refs.upload_excel_ref.fileName = "";
      this.$refs.upload_excel_ref.$refs.fileUpIpt.value = "";
    },
    /**
     * @name getSyncData
     * @description 获取异步数据
     * @author cjs1992
     * @date 2019-11-14 17:09:20
     */
    async getSyncData() {
      this.getAllYx();
      this.getDictByBzdm_xxfs();
      this.getDictByBzdm_bjcc();
      // this.getDictByBzdm_xn();
    },
    /**
     * @name getAllZy
     * @description 获取专业
     * @author cjs1992
     * @date 2019-11-14 17:10:03
     */
    async getAllZy(id, str) {
      const res = await this.$store.dispatch("base-common/getZzjgZyAll", {
        id
      });
      this[str || "zyList"] = res.data || [];
    },
    /**
     * @name getAllYx
     * @description 获取院系
     * @author cjs1992
     * @date 2019-11-14 17:11:20
     */
    async getAllYx() {
      const res = await this.$store.dispatch("base-common/getZzjgYxAll");
      this.yxList = res.data || [];
    },
    /**
     * @name getDictByBzdm_xxfs
     * @description 学习层次
     * @author cjs1992
     * @date 2019-11-14 17:28:46
     */
    async getDictByBzdm_xxfs() {
      const res = await getDictByBzdm_xxfs();
      this.xxfsList = res;
    },
    /**
     * @name getDictByBzdm_bjcc
     * @description 层次
     * @author cjs1992
     * @date 2019-11-14 17:30:17
     */
    async getDictByBzdm_bjcc() {
      const res = await getDictByBzdm_bjcc();
      this.ccList = res;
    },
    /**
     * @name remoteMethod
     * @description 远程查询班主任
     * @author cjs1992
     * @date 2019-11-14 16:14:10
     */
    async remoteMethod(val) {
      const query = val.trim();
      if (query !== "") {
        const res = await this.$store.dispatch("base-common/findJzgxxList", {
          search: query
        });
        try {
          this.jzgList = res.data.map(item => {
            return {
              ...item,
              label: `${item.xm} [${item.zgh}]`
            };
          });
        } catch (error) {}
      } else {
        this.jzgList = [];
      }
    },
    /**
     * @name getDictByBzdm_xn
     * @description 获取入学年级
     * @author cjs1992
     * @date 2019-11-14 09:36:17
     */
    async getDictByBzdm_xn() {
      const list = await getDictByBzdm_xn({
        _this: this
      });
      this.rxNjOptions = list;
      this.njList = list;
    },
    /**
     * @name getDictByBzdm_xz
     * @description 获取学制
     * @author cjs1992
     * @date 2019-11-14 09:37:46
     */
    async getDictByBzdm_xz() {
      const list = await getDictByBzdm_xz({
        _this: this
      });
      this.xzOptions = list;
    },
    /**
     * @name searchFunc
     * @description 搜索
     * @author cjs1992
     * @date 2019-11-13 17:10:41
     */
    searchFunc() {
      this.searchData = {
        xzId: this.xzId,
        rxNjId: this.rxNjId,
        zzJgId: this.zzJgId,
        bm: this.bm
      };
      this.handleCurrentChange(1);
    },
    /**
     * @name resetFunc
     * @description 重置
     * @author cjs1992
     * @date 2019-11-13 17:10:56
     */
    resetFunc() {
      this.xzId = "";
      this.rxNjId = "";
      this.zzJgId = "";
      this.bm = "";
      this.searchFunc();
    },
    /**
     * @name addFunc
     * @description 添加
     * @author cjs1992
     * @date 2019-11-13 17:12:09
     */
    addFunc() {
      this.editId = ""; // 新增状态
      this.resetFormData();
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.resetForm();
      });
    },
    /**
     * @name handleSelectionChange
     * @description 切换表格选择项
     * @author cjs1992
     * @date 2019-11-13 17:14:43
     */
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    /**
     * @name handleCurrentChange
     * @description 切换页码
     * @author cjs1992
     * @date 2019-11-13 17:15:50
     */
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getBjListByCon();
    },
    /**
     * @name handleSizeChange
     * @description 切换每页条数
     * @author cjs1992
     * @date 2019-11-13 17:16:20
     */
    handleSizeChange(val) {
      this.pageSize = val;
      this.handleCurrentChange(1);
    },
    /**
     * @name getBjListByCon
     * @description 根究条件获取班级列表
     * @author cjs1992
     * @date 2019-11-13 17:17:40
     */
    async getBjListByCon() {
      const res = await this.$store.dispatch("jcsz-bjxxwh/getBjListByCon", {
        ...this.searchData,
        startPage: this.currentPage,
        pageSize: this.pageSize,
        zzJgLx: this.searchData.zzJgId ? this.zzJgLx : ''
      });
      let list = res.data.list || [];
      this.tableData = list;
      this.totalSize = res.data.total;
    },
    /**
     * @name changeFunc
     * @description 切换
     * @author cjs1992
     * @date 2019-11-14 14:50:57
     */
    async changeFunc(data, val) {
      await this.$store.dispatch("jcsz-bjxxwh/editBjStatusById", {
        bjId: data.ID,
        sfqy: val
      });
      this.$message({
        type: "success",
        message: "编辑成功!"
      });
      this.getBjListByCon();
    },
    /**
     * @name editFunc
     * @description 编辑
     * @author cjs1992
     * @date 2019-11-14 14:51:40
     */
    async editFunc(data) {
      this.resetFormData();
      this.editId = data.ID;
      // 设置院系id
      this.$set(this.formData, "yxId", data.YXID);
      // 根据院系id获取专业列表
      this.getAllZy(data.YXID);
      // for (let key in data) {
      //   if (this.formData[key] !== undefined) {
      //     this.$set(this.formData, key, data[key]);
      //   }
      // }
      const res = await this.getBjById();
      /*
      BH: "1002"
      BJJC: "1002"
      BM: "1002"
      BZR_ID: 1001000000680226
      CC_ID: 1001000000709651
      FJD_ID: 1001000000706002
      GDJS_ID: null
      ID: 1100000001078072
      NJ_ID: 1001000000489681
      RS: 20
      RXSJ: "2019-11-07"
      XSLB_ID: null
      XZ_ID: 1001000000295797
      YJBYSJ: "2019-11-30"
      */
      const obj = {
        bh: "BH",
        bm: "BM",
        bjjc: "BJJC",
        bzrId: "BZR_ID",
        fjdId: "FJD_ID",
        njId: "NJ_ID",
        xzId: "XZ_ID",
        rxsj: "RXSJ",
        yjbysj: "YJBYSJ",
        xxfsId: "XXFS_ID",
        rs: "RS",
        ccId: "CC_ID",
        sfqy: "SFQY"
      };
      for (let key in obj) {
        this.$set(this.formData, [key], res[obj[key]]);
      }
      // 班主任信息
      this.remoteMethod(String(this.formData.bzrId));
      this.dialogVisible = true;
    },
    /**
     * @name getBjById
     * @description 根据班级id获取班级详情
     * @author cjs1992
     * @date 2019-11-15 09:26:37
     */
    async getBjById() {
      const res = await this.$store.dispatch("jcsz-bjxxwh/getBjById", {
        id: this.editId
      });
      return Promise.resolve(res.data || {});
    },
    /**
     * @name delFunc
     * @description 删除
     * @author cjs1992
     * @date 2019-11-14 14:51:51
     */
    async delFunc(data) {
      let obj = [];
      if (data !== 1) {
        // 单个删除
        obj = [data.ID];
      } else {
        // 多条删除
        if (!this.multipleSelection.length) {
          this.$message({
            type: "warning",
            message: "请选择要删除的数据"
          });
          return;
        }
        obj = this.multipleSelection.map(item => item.ID);
      }
      this.$confirm("您确定要删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          await this.$store.dispatch("jcsz-bjxxwh/delBjByIds", {
            bjIds: obj
          });
          this.$message({
            type: "success",
            message: "删除成功"
          });
          this.handleCurrentChange(1);
        })
        .catch(() => {});
    },
    submitForm() {
      this.$refs["ruleForm"].validate((valid, a) => {
        if (valid) {
          const { yjbysj, rxsj } = this.formData;
          if (yjbysj && rxsj && new Date(yjbysj) < new Date(rxsj)) {
            this.$message({
              type: 'warning',
              message: '预计毕业时间不得早于入学时间'
            });
            return;
          }
          this.sureFunc();
        } else {
          // console.log("error submit!!");
          console.log(valid, a);
          return false;
        }
      });
    },
    /**
     * @name sureFunc
     * @description 新增/编辑
     * @author cjs1992
     * @date 2019-11-14 17:37:49
     */
    async sureFunc() {
      let url = "addBj",
        msg = "新增",
        obj = {};
      if (this.editId) {
        (url = "editBjById"), (msg = "编辑"), (obj = { id: this.editId });
      }
      await this.$store.dispatch(`jcsz-bjxxwh/${url}`, {
        ...this.formData,
        ...obj
      });
      this.$message({
        type: "success",
        message: `${msg}成功!`
      });
      this.dialogVisible = false;
      // this.currentPage = 1;
      this.getBjListByCon();
    },
    /**
     * @name resetForm
     * @description 重置表格
     * @author cjs1992
     * @date 2019-11-14 17:41:35
     */
    resetForm() {
      // 此处需要先清除数据 TODO
      this.resetFormData();
      this.$refs["ruleForm"].resetFields();
    },
    /**
     * @name resetFormData
     * @description 重置表格数据
     * @author cjs1992
     * @date 2019-11-14 17:41:45
     */
    async resetFormData() {
      this.formData = {
        bh: "", // 班号
        bm: "", // 班名
        bjjc: "", // 班级简称
        bzrId: "", // 班主任id
        yxId: "", // 院系id
        fjdId: "", // 专业id
        njId: "", // 年级
        xzId: "", // 学制
        rxsj: "", // 入学时间
        yjbysj: "", // 预计毕业时间
        xxfsId: "", // 学习方式
        rs: "", // 编制人数
        ccId: "", // 层次
        sfqy: 1
      };
    }
  }
};
</script>
<style lang="scss" scoped>
@import "../common-switch.scss";
.operate_container {
  padding: 22px;
  box-shadow: 0 5px 39px 0 rgba(0, 0, 0, 0.1);
}
.operate_item {
  display: inline-table;
  margin-right: 20px;
  margin-bottom: 12px;
}
.operate_left {
  display: table-cell;
  padding-right: 12px;
  width: 88px;
  color: #344563;
  text-align: right;
  font-size: 14px;
  box-sizing: border-box;
}
.operate_right {
  display: table-cell;
}
.operate_item_btnGroup {
  display: inline-block;
  width: 272px;
  text-align: right;
}
.operate_item_btnGroup .el-button {
  width: 106px;
}
.table_wrap {
  padding: 10px 20px;
}
.el-table-btn-wrap {
  /deep/ {
    button span {
      font-size: 12px;
    }
  }
}
.demo-ruleForm {
  font-size: 0;
  /deep/ .el-form-item {
    display: inline-block;
    width: 50%;
    vertical-align: top;
    .el-select {
      width: 100%;
    }
    .el-date-editor {
      width: 100%;
    }
  }
}
.uploadBox {
  margin: 100px auto;
  padding: 0 30px;
}
.downUrl {
  line-height: 36px;
  margin-left: 30px;
  display: block;
  color: #12ad8a;
  font-size: 14px;
  text-decoration: underline;
}
</style>
